<template>
  <div class="my-input">
    <label for="">{{ label }}</label>
    <input type="text" :value="value" @input="inpChange" @blur="inpBlur" />
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    value: String,
  },
  data() {
    return {};
  },
  methods: {
    inpChange(e) {
      this.$emit("input", e.target.value);
    },
    //输入内容的时候修改v-model的内容
    inpBlur() {
      this.$emit("blur");
    },
    //失去焦点的时候调用父组件传来的失去焦点事件
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.my-input {
  margin-top: 20px;

  input {
    width: 60%;
    height: 30px;
    border-radius: 5px;
    min-width: 50px;
    margin-right: 4px;
  }
  label {
    width: 64px;
    display: inline-block;

    // text-align: justify;
    text-align-last: justify;
  }
}
</style>
